<template>
    <div class="A">
        <!--      头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">花艺学院</p>
        </Top>

        <div class="top-main">

            <cube-scroll>


                <!--banner-->
                <div class="banner1"></div>
                <div class="banner2"></div>

                <!--活动说明-->
                <div class="caption">
                    <p>双11疯狂购物，不如提升花艺，满足每一位客户需求，充实自己，为自己赢得更多的客户。</p>
                    <p>SO，花娃双11送福利：11.11当日，在花艺学院充值花瓣的宝宝们，充多少送多少~</p>
                    <p>网红爆款、气球花篮、圣诞特辑等花艺课马上学起来！</p>
                </div>

                <!--活动步骤-->
                <div class="step1"></div>
                <div class="step2"></div>
                <div class="step3"></div>
                <div class="step4"></div>
                <div class="step5"></div>
                <div class="step6"></div>

                <!--活动规则-->
                <div class="rule">
                    <div class="line clearfix">
                        <div class="left">1、</div>
                        <div class="left right">仅限2018年11月11日当天</div>
                    </div>
                    <div class="line clearfix">
                        <div class="left">2、</div>
                        <div class="left right">充值金额>100元，即可参与活动，到账花瓣金额为充值金额的2倍（如充100花瓣，实际到账200花瓣）</div>
                    </div>
                    <div class="line clearfix">
                        <div class="left">3、</div>
                        <div class="left right">花瓣是花娃花艺学院平台的虚拟货币，花瓣用于购买平台的付费内容，不能提现或转让、赠送</div>
                    </div>
                    <div class="line clearfix">
                        <div class="left">4、</div>
                        <div class="left right">花瓣奖励为即时到账，如未即时到账，可能为网络延迟，5-10分钟后再次查看花瓣数量</div>
                    </div>
                </div>

            </cube-scroll>


        </div>


    </div>
</template>

<script>
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'A',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
            }
        },
        methods:{
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .A{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        .fl{
            float: left;
        }

        .fr{
            float: right;
        }

        .clearfix:after {
            content: "";
            height: 0;
            visibility: hidden;
            overflow: hidden;
            display: block;
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .br-hid {
            border-right: hidden!important;
        }

        .br{
            border-right: 0.01rem solid #e1e1e1;
        }

        .mt18{
            margin-top: 0.18rem!important;
        }

        .mt8{
            margin-top: 0.08rem!important;
        }

        .mt30 {
            margin-top: 0.3rem!important;
        }

        .mr0 {
            margin-right: 0!important;
        }

        .pt34 {
            padding-top: 0.34rem!important;
        }

        .plr{
            padding: 0 0.25rem!important;
        }

        .pl25{
            padding-left: 0.25rem!important;
        }

        .pr25{
            padding-right: 0.25rem!important;
        }

        .plr-hid{
            padding: 0 0!important;
        }

        .h200{
            height: 2rem!important;
        }

        .h230{
            height: 2.3rem!important;
        }

        .bb-dashed{
            border-bottom: 0.01rem dashed #e1e1e1;
        }

        .bb-solid{
            border-bottom: 0.01rem solid #e1e1e1;
        }

        .ptb30{
            padding: 0.3rem 0!important;
        }


        /*banner*/
        .banner1{
            width: 100%;
            height: 2.7rem;
            margin: 0 auto;
            background: url(/static/special/a/banner1.jpg) top center no-repeat;
            background-size: 100% 2.7rem;
        }

        .banner2{
            width: 100%;
            height: 2.58rem;
            background: url(/static/special/a/banner2.jpg) top center no-repeat;
            background-size: 100% 2.58rem;
        }

        /*活动说明*/
        .caption {
            width: 100%;
            height: 4.4rem;
            background: url(/static/special/a/caption.jpg) top center no-repeat;
            background-size: 100% 4.4rem;
            padding-left: 0.58rem;
            padding-right: 0.58rem;
            padding-top: 0.92rem;
            box-sizing: border-box;
            overflow: hidden;

        }

        .caption p{
            font-size: 0.2rem;
            color: #333;
            text-indent: 2em;
            line-height: 0.4rem;
            margin: 0;
        }

        /*充值步骤*/
        .step1{
            width: 100%;
            height: 2.44rem;
            margin: 0 auto;
            background: url(/static/special/a/step1.jpg) top center no-repeat;
            background-size: 100% 2.44rem;
        }

        .step2{
            width: 100%;
            height: 2.51rem;
            margin: 0 auto;
            background: url(/static/special/a/step2.jpg) top center no-repeat;
            background-size: 100% 2.51rem;
        }

        .step3{
            width: 100%;
            height: 2.68rem;
            margin: 0 auto;
            background: url(/static/special/a/step3.jpg) top center no-repeat;
            background-size: 100% 2.68rem;
        }

        .step4{
            width: 100%;
            height: 2.49rem;
            margin: 0 auto;
            background: url(/static/special/a/step4.jpg) top center no-repeat;
            background-size: 100% 2.49rem;
        }

        .step5{
            width: 100%;
            height: 2.31rem;
            margin: 0 auto;
            background: url(/static/special/a/step5.jpg) top center no-repeat;
            background-size: 100% 2.31rem;
        }

        .step6{
            width: 100%;
            height: 2.37rem;
            margin: 0 auto;
            background: url(/static/special/a/step6.jpg) top center no-repeat;
            background-size: 100% 2.37rem;
        }

        /*活动规则*/
        .rule{
            width: 100%;
            height: 5rem;
            margin: 0 auto;
            background: url(/static/special/a/rule.jpg) top center no-repeat;
            background-size: 100% 5rem;
            padding-left: 0.58rem;
            padding-right: 0.58rem;
            padding-top: 1rem;
            box-sizing: border-box;
        }

        .rule .left {
            width: 10%;
            float: left;
            font-size: 0.2rem;
            color: #333;
            line-height: 0.36rem;
        }

        .rule .right{
            width: 90%;
        }
    }
</style>
